<template>
  <a-config-provider :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
import { useAppStore } from "@/stores/modules/app";

import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh");

const appStore = useAppStore();
const w = ref(document.body.clientWidth);

// 监听浏览器窗口变化
watchEffect(() => {
  if (w.value <= 640) {
    appStore.setMobile(true);
    appStore.setCollapsed(false);
  } else {
    appStore.setMobile(false);
    appStore.setSidebar(false);
  }
});
onMounted(() => {
  // 监听窗口事件，判断窗口类型是否是移动端
  window.addEventListener("resize", () => {
    w.value = document.body.clientWidth;
  });
});
</script>

<style lang="scss">
#app {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: Avenir, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
